<template>
  <table @click="handleYearTableClick" class="year-table">
    <tbody>
    <tr>
      <td class="available" :class="getCellStyle(startYear + 0)">
        <a class="cell">{{ startYear }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 1)">
        <a class="cell">{{ startYear + 1 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 2)">
        <a class="cell">{{ startYear + 2 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 3)">
        <a class="cell">{{ startYear + 3 }}</a>
      </td>
    </tr>
    <tr>
      <td class="available" :class="getCellStyle(startYear + 4)">
        <a class="cell">{{ startYear + 4 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 5)">
        <a class="cell">{{ startYear + 5 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 6)">
        <a class="cell">{{ startYear + 6 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 7)">
        <a class="cell">{{ startYear + 7 }}</a>
      </td>
    </tr>
    <tr>
      <td class="available" :class="getCellStyle(startYear + 8)">
        <a class="cell">{{ startYear + 8 }}</a>
      </td>
      <td class="available" :class="getCellStyle(startYear + 9)">
        <a class="cell">{{ startYear + 9 }}</a>
      </td>
      <td></td>
      <td></td>
    </tr>
    </tbody>
  </table>
</template>

<script type="text/babel">
  import {DomUtils} from '../utils'

  export default {
    props: {
      disabledDate: {},
      date: {},
      year: {}
    },

    computed: {
      startYear () {
        return Math.floor(this.year / 10) * 10
      }
    },

    methods: {
      getCellStyle (year) {
        const style = {}
        const date = new Date(this.date)

        date.setFullYear(year)
        style.disabled = typeof this.disabledDate === 'function' &&
          this.disabledDate(date)
        style.current = Number(this.year) === year

        return style
      },

      nextTenYear () {
        this.$emit('pick', Number(this.year) + 10, false)
      },

      prevTenYear () {
        this.$emit('pick', Number(this.year) - 10, false)
      },

      handleYearTableClick (event) {
        const target = event.target
        if (target.tagName === 'A') {
          if (DomUtils.hasClass(target.parentNode, 'disabled')) return
          const year = target.textContent || target.innerText
          this.$emit('pick', Number(year))
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./../css/variables";

  .year-table {
    font-size: 12px;
    margin: -1px;
    border-collapse: collapse;

    .el-icon {
      color: $datePicker-icon-color;
    }

    td {
      text-align: center;
      padding: 20px 3px;
      cursor: pointer;

      &.disabled .cell {
        background-color: #f4f4f4;
        cursor: not-allowed;
        color: #ccc;
      }

      &.disabled .cell:hover{
        text-decoration: none;
      }

      .cell {
        width: 48px;
        height: 32px;
        display: block;
        line-height: 32px;
        color: $datePicker-color;
      }

      &:not(.disabled) .cell:hover{
        background-color: $datePicker-cell-hover-color;
        text-decoration: none;
      }

      &.current:not(.disabled) .cell {
        background-color: $datePicker-active-color !important;
        color: #fff;
      }
    }
  }
</style>
